*{margin:0;padding:0;}
input{outline: none;}
body {
    font-family: 'Open Sans', sans-serif;
    background:#4b5d67;
    line-height: 1;
    color: black;
}
ol, ul {
    list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

html,body{height:100% !important;}
/*end of reset*/

/*header*/
header{height:50px;display:inline-block;background:#405058;width:100%; min-width: 1650px;}
#navbar-header{width: 250px;height: 100%;background: #0a819c;text-align: center;display:inline-block;float:left;}
a#logo{font-size:30px;color:#fff;text-decoration:none;height:50px;line-height:50px;font-family: 'Oswald', sans-serif;}
/*end of header*/

/*body*/
div#wrapper{width:100%;min-height:100%;background:#4b5d67 !important;display:inline-block;float:left;margin-top:-3px;}
div#sidebar{z-index:1;width:250px;height:100%;position:absolute;display:inline-block;float:left;background:#4b5d67;}
div#page{position:absolute;min-height:150%;width:calc(100% - 250px); min-width: 1400px; margin: 0 0 0 250px;padding: 0 !important;background:#f0f2f5 !important; transition: 0.5s all linear; -webkit-transition: 0.5s all linear; -moz-transition: 0.5s all linear; display:inline-block;}
div#page-titlebar{display:inline-block;float:left;min-width: 800px !important;width:100%;height:35px;background:#fff;border-bottom:1px solid  rgba(0, 0, 0, 0.2);z-index:10;padding: 10px 0 10px 0;}
div#page-content{display:inline-block;float:left;padding:25px;min-width: 800px !important;width: calc(100% - 50px);background: #f0f2f5;}
div#page-title{font-size: 25px;font-weight: 300;display: inline-block;color:#999;height: 35px;line-height:35px;margin-left:20px;}
div#profile{height:61px;padding:15px;border-bottom: 1px solid #4f626d;}
div#photo{float: left;border: 5px solid rgba(255, 255, 255, 0.1);border-radius: 50%;width:45px;height:45px;}
#photo img{width:45px;height:45px; border-radius: 50% !important;}
div#info{float: left;width:160px;height:55px;color:#fff;padding: 5px 0 5px 5px;}
div#prof-act{height:18px;margin-top:5px;display: inline-block;padding: 0 20px 0 20px;}
#prof-act a{color:#fff;margin: 0 10px 0 5px;}
#prof-act a:hover{color:#999;}
.widget {background:#fff;padding:5px;margin:0 40px 20px 0;display:inline-block;float:left;}
/*end of body*/

/*profile*/
#profile-photo{border-bottom:3px solid #0a819c;height: 300px; width:200px;text-align:center;}
#prof-photo{display:inline-block;height:200px;width:200px;margin-top:10px;}
#btn-upload{margin-top: 10px;}
#profile-edit{border-bottom:3px solid #0a819c;height: auto; min-width: 200px; width: 600px;padding: 15px;color:#0a819c;}
#profile-edit input{max-width:60%;}
h2{color: #0a819c;font-family: "open sans";font-size: 18px;text-transform: uppercase;font-weight: bold;}
hr{background: #0a819c;border:none;height: 1px;}
#btn-change-passw{float: left;}
#btn-change-prof{float: left;}
/*end of profile*/

/*buttons*/
.btn{display:inline-block;cursor:pointer;padding:10px 20px;}
.btn-green{background: #0a819c;color:#fff;font-weight:bold;}
.btn-green:hover{background: #405058;}
.btn-green:active{background: #0a819c;}
/*end of buttons*/

/*menu*/
.accordionmenu,
.accordionmenu ul,
.accordionmenu li,
.accordionmenu a,
.accordionmenu span{margin:0;padding:0;border:none;outline:none;}
.accordionmenu li{list-style:none;}
.accordionmenu li > a{display:block;position:relative;min-width:110px;padding:0 10px 0 30px;height:49px;line-height:49px !important;color:#fdfdfd;font:bold 12px/32px Arial, sans-serif;text-decoration:none;border-bottom: 1px solid #4f626d;}
.accordionmenu > li:hover > a,
.accordionmenu > li:target > a,
.accordionmenu ul > li:hover> a,
.accordionmenu > li > a.active{color:#fff;cursor:pointer;background:#0a819c;transition:1s;}
.accordionmenu li > a span{display:block;position:absolute;top:16px;right:0;padding:0 10px;margin-right:10px;font:normal bold 12px/18px Arial, sans-serif;background:#404247;border-radius:15px;border:1px solid #fff;}
.accordionmenu > li:hover > a span,
.accordionmenu > li:target > a span,
.accordionmenu > li > a.active span{color:#fdfdfd;background:#2d6ca2;}
.accordionmenu > li > a:before{position:absolute;top:0;left:0;content:'';width:24px;height:24px;margin:4px 8px;}
.sub-menu li a{color:#fff;border-bottom: 1px solid #475861 !important;padding-left:60px;background:#405058;}
.sub-menu li:hover a{color:#0a819c;border-bottom:1px solid #0a819c !important;transition:1s;}
.sub-menu li:last-child a{border:none;}
.sub-menu li > a span{color:#fff;background:transparent;}
.sub-menu em{position:absolute;top:0;left:30px;height: 49px;line-height: 49px !important;margin-left:14px;color:#fff;font:normal 10px/32px;}
.accordionmenu li > .sub-menu{display:none;}
.accordionmenu li:target > .sub-menu{display:block;}
.f-a {line-height: 49px !important; float: right;}
/*end of menu*/

/*bootstrap tooltip*/
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-size: 12px;
  line-height: 1.4;
  visibility: visible;
  filter: alpha(opacity=0);
  opacity: 0;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: -3px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  right: 5px;
  bottom: 0;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

/*end of bootstrap tooltip*/

/*footer*/
#footer {
    font-family: 'Open Sans', sans-serif;
    position: fixed;
    width: 100%;
    bottom: 0px;
    padding: 15px 20px;
    background: #fff;
    color: #999;
    z-index: 999;
}

#footer .copyright{font-size: 13px;}
.copyright a{color: #999;}
.copyright a:hover{color: #999}
.copyright a:visited{color: #999}
/*end of footer*/

/*login*/
#login{background: url("../img/bg-txt.jpg") repeat;
}

#signing_page{width: 400px; height: 350px; background:#eee;margin:120px auto 0;color:#999;box-shadow: 1px 1px 10px #999;}
#signing_page #lg-head{height:65px;background: #e9e9e9;}
#signing_page #lg-head h1{
    font-family: 'oswald';
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    line-height: 65px;}
#signing_page #lg-content{height:285px;padding: 30px;}
input[type='text'],input[type='password']{
    font-size: 16px;
    height: 30px;
    /*border:1px solid #e5e5e5;*/
    border:none;
    color: #000;
    margin:10px 0;
    padding-right:22px;
    display: inline-block;
    width: 300px;
    border-bottom:1px solid transparent;}
input[type='text']:hover,input[type='password']:hover,input[type='text']:focus,input[type='password']:focus{
    border-bottom:1px solid #0a819c;}

input:read-only{border:none;}
input:read-only:hover{border:none;}
input:read-only:focus{border:none;}
select{
    font-size: 16px;
    height: 30px;
    border:none;
    border-bottom:1px solid transparent;
    color: #000;
    margin:10px 0;
    padding-right:22px;
    width: 300px;
    display: inline-block;
    outline: none;}
label{width: 500px; display: inline-block;}
select:hover,select:focus{
    border-bottom:1px solid #0a819c;}
button{padding:10px 15px;float: right; color:#fff; background:#47a447; border:1px solid #3e8f3e;cursor: pointer;font-size:14px;}
button:hover{background:#3e8f3e; border:1px solid #398439;}
.ps{display:inline-block;width:100%;font-size: 12px;margin:10px 0;}
.f-l{margin-left: -20px;}
/*end login*/

.action-bar{min-width: 500px; width: 100%; display: inline-block; float: left; border-bottom: 1px solid #eee; padding: 20px;}
#adm-product thead{background: #0a819c; color: #fff; font-weight: bold; font-size: 17px;}
#adm-product tbody tr{color: #777; cursor: pointer; font-size: 17px;}
#adm-product tbody tr:hover{background: #19a3d1; color: #fff;}
#adm-product thead td{min-width: 50px; height: 35px; vertical-align: middle; text-align: center;}
#adm-product td{min-width: 50px; max-width: 200px; vertical-align: middle; padding: 5px 5px;border-bottom: 1px solid #0a819c; background: transparent;}
.center{text-align: center;}


.act{display: inline-block;margin: 0 3px;color:#4b5d67}
.act:hover{color: #fff;}

a.act{display: inline-block;margin: 0 3px;color: #4b5d67;}
a.act:hover{color: #fff;}

#addimg .main-image{width: 400px; height: 400px; display: table-cell; vertical-align: middle;border: 1px solid #0a819c; margin-bottom: 10px;}
#addimg .main-image img{width: 400px; max-height: 400px; display: block;}
#addimg .small-image{width: 400px; min-height:75px; display: block;margin-bottom: 10px;}
#addimg .small-image img{max-width: 97px; height: 70px; display: inline-block; float: left; margin: 3px; border: 1px solid transparent;}
#addimg .small-image img:hover{border: 1px solid #0a819c;}

#prod-add{width: 500px; color: #0a819c; margin: 10px 0 0 0;}
input[type=file]#prod-img{height: 50px; width:262px; position: relative; z-index: 3; margin: -40px 0 0 70px; display: block; opacity: 0; cursor: pointer;}
#prod-img-add{position: relative; z-index: 1; margin: 10px 0 0 70px;}
input[type=submit]#prod-submit{visibility: hidden;}
input[type=reset]#prod-reset{visibility: hidden;}

.remove_img{display: inline-block; float: left;}
.fa-hover{color: #0a819c; cursor: pointer;}
.fa-hover:hover{color: #4b5d67;}

#btn-prod-add{width: 200px; margin: 20px 0 10px 150px; text-align: center;}

.badge{display:inline-block; padding: 2px 5px; font-size: 14px;}
.badge-red{color: #fff; background: #b34343;text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}
.badge-green{color: #fff; background: #3cb371;text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}
.badge-yellow{color: #fff; background: #ffd700;text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}
.badge-blue{color: #fff; background: #3399ff;text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}

.list{display: none; width:110px; height: 95px; background:#fff;z-index: 10; position:absolute;border: 1px solid #f5f5f5; box-shadow: 2px 2px 10px rgba(0,0,0,0.5);}
.items{display:block; width:110px; height: 30px; line-height: 30px; float: left; color:#777; background:#fff; border-bottom:1px solid #999;cursor:pointer;}
.items:hover{background: #f5f5f5; color: #262626;}

#widget-portfolio{width: 600px; max-height: 620px;}
#items-portfolio{width: 620px; max-height: 610px;}
#add-portfolio{display: block; float: left;}
.portfolio{height: 100px; width: 600px; display:block; float: left; margin: 5px 0; border:1px solid #eee;}
.portfolio:hover{border: 1px solid #0a819c; transition: 0.5s;}
.portfolio img{height: 95px; width: 95px; margin: 2px 7px 2px 2px;display: inline-block; float: left;border: 1px dashed #0a819c;}
.portfolio .comment-portfolio{display: inline-block;float: left;height: 93px; width: 300px; margin: 2px 7px 2px 2px; resize: none; border: none; outline: none;}
.action-portfolio{display: inline-block;float: left; height: 95px; line-height: 95px; width: 160px; margin: 2px 7px 2px 2px; text-align: center; font-size: 20px;}
.portfolio .fa{cursor: pointer;}

.modal_overlay{height: 100%; width: 100%; background: rgba(9,151,198,0.3); display: none; z-index: 99; position:fixed; top:0; left:0;}

.modal{color: #999;position: fixed; top:50% !important; left:50% !important; margin-top:-75px !important; margin-left: -185px !important;  height: 150px; width: 370px; background: #fff; z-index: 100;display: none; box-shadow: 0 3px 15px rgba(9,151,198,0.8); border-radius: 7px;text-align: center; padding: 20px 10px;}
.modal .upload-img{width: 95px; display: block; float: left;}
input[type=file]#prod-img{height: 40px; width:95px; z-index: 101; top:0; display: block; opacity: 0; float: left; margin-left: -5px; margin-top: -35px;}
input[type=submit]#prod-submit{visibility: hidden;}
input[type=reset]#prod-reset{visibility: hidden;}
.modal img{ height: 100px; width: 90px; border: 1px dashed #0a819c; display: block; float: left;}
.modal textarea{ height: 100px; width: 250px; border: 1px solid #0a819c; display: block; float: left; resize: none; margin-left: 20px;}
.modal #btn-set-portfolio{width: 200px; padding: 10px 1px;margin-top: 5px;font-size: 14px; margin-left: 45px;display: block; float: left;}
.modal #btn-set-img{width: 90px; left:0; padding: 10px 1px;font-size: 14px; display: block; float: left; margin-top: 5px; cursor: pointer;}
.slimScrollDiv{display: block; float: left;}

#change-pass{width: 330px;}
#btn-change-pass{margin-left: 75px;}